<!--路口告警-->
<template>
  <div class="inter-warning">
    <div class="warn-top">
      <span v-text="interName" />
      <Icon class="close-fill"
            @click="closeWarn"
            icon="close-fill" />
    </div>
    <div class="warn-list">
      <van-list v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad">
        <van-cell v-for="item in list"
                  :key="item.id">
          <span v-text="item.interName"></span>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, toRefs } from 'vue'
import Icon from '/@/components/Icon/Icon.vue'
import { state } from './state'
import { v4 as uuid4 } from 'uuid'
export default defineComponent({
  components: {
    Icon,
  },
  props: {
    interName: {
      type: String,
      default: '',
    },
  },
  emits: ['closeWarn'],
  setup(props, { emit }) {
    onMounted(() => {
      for (let index = 0; index < 40; index++) {
        const element = {
          id: uuid4(),
          interName: 'inter-name',
          content: 'this is content',
          time: '2021-02-24 10:24:12',
        }
        state.list.push(element)
      }
    })

    const closeWarn = () => {
      emit('closeWarn')
    }

    /**
     * @Description 上拉加载
     * @date 2021-03-11
     * @returns {any}
     */
    const onLoad = () => {
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          const element = {
            id: uuid4(),
            interName: 'inter-name',
            content: 'this is content',
            time: '2021-02-24 10:24:12',
          }
          state.list.push(element)
        }

        // 加载状态结束
        state.loading = false

        // 数据全部加载完成
        if (state.list.length >= 40) {
          state.finished = true
        }
      }, 1000)
    }

    return {
      ...toRefs(state),
      onLoad,
      closeWarn,
    }
  },
})
</script>


<style lang="less" scoped>
@import './warn.less';
</style>